<template>
    <div id="editor"></div>
</template>

<script>
import wangEditor from 'wangeditor'
export default {
    name: "Editor",
    data(){
        return{
            editor: null,
            editorData: '',
        }
    },
    model:{
        prop:'value',
        event:'change'
    },
    props:{
        value:String
    },
    created() {
        this.editorData = this.value;
    },
    mounted() {
        this.createEditor();
    },
    watch:{
        value(n,o){
            // console.log(n);
            this.editor.txt.html(n);
        }
    },
    methods:{
        html(){
            // console.log('====');
            // console.log(this.model);
            // this.editor.txt.html(this.editorData);
        },
        createEditor(){
            let _this = this;
            const editor = new wangEditor(`#editor`)
            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.editorData = newHtml;
                this.$emit('change',newHtml)
            }
            editor.config.zIndex = 1;
            editor.config.uploadImgServer = this.$config.uploadUrl;
            editor.config.uploadFileName = 'file'
            editor.config.uploadImgParams = {
                token: _this.$user.getToken()
            }
            editor.config.uploadImgHooks = {
                customInsert: function(insertImgFn, result) {
                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(result.data.real_path.indexOf('http') >= 0 ? result.data.real_path : _this.$config.assetsUrl + result.data.real_path);
                }
            }

            // 创建编辑器
            editor.create()

            editor.txt.html(this.value);

            this.editor = editor
        },
    }
}
</script>
